<style>
    .com06 {
        display: none
    }
</style>

<!-- i_banner -->
<div class="i_banner">
    <div class="swiper iSwiper swiper-container-fade swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-active"
                style="width: 1903px; opacity: 1; transform: translate3d(0px, 0px, 0px);">
                <div class="box">
                    <div class="bg"> <video src="/video/sy_banner_1013.mp4?v=7" muted="" autoplay="" loop=""
                            poster="/video/bannervideobg363699.jpg"></video></div>
                    <div class="text aos-init aos-animate" aos="fade-up">
                        <!-- <img src="/static/picture/z.svg" alt="" class="h3_img"> -->
                        <h4>致力于成为中国高性能功能材料技术领导者</h4>
                        <a href="/about.html" class="more">DISCOVER<i><img src="/static/images/i_b_jian.png"
                                    alt=""></i></a>
                    </div>
                    <!-- h5手机适配 -->
                    <div class="i_h5_banner"><img src="/video/i_h5_banner0531.jpg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="road">
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev iSwiper-button-prev fa fa-left swiper-button-disabled" tabindex="0"
                role="button" aria-label="Previous slide" aria-disabled="true">&lt;</div>
            <div class="content">
                <div class="sp_1"> 01 </div>
                /
                <div class="sp_2">01</div>
            </div> -->
            <!-- <div class="swiper-button-next iSwiper-button-next fa fa-right swiper-button-disabled" tabindex="0"
                role="button" aria-label="Next slide" aria-disabled="true">&gt;</div> -->
        </div>
        <div class="tool">
            <a href="https://suryee.en.alibaba.com/" target="_blank"><img src="/static/images/sy_banner_tb1.png"
                    alt=""></a>
            <div class="scroll">
                <span>Scroll</span>
                <div class="dot"></div>
            </div>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
</div>

<script>
    $(".i_banner .tool .scroll").click(function () {
        $('body,html').animate({ scrollTop: $('.i02').offset().top }, 800)
    })

    $(".i_banner .road .content .sp_2").html(`0${$(".iSwiper .swiper-slide").length}`)
    var iSwiper = new Swiper('.iSwiper', {
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.iSwiper-button-next',
            prevEl: '.iSwiper-button-prev',
        },
        effect: 'fade',
        autoplay: {
            delay: 10000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        on: {
            slideChange: function () {
                $(".i_banner .road .content .sp_1").html(`0${this.activeIndex + 1}`)
            },
        },
    })        
</script>
<!-- 滚动条上下滑动 -->
<script>
    $(function () {
        var p = 0, temp = 0, i = 1;
        $(window).scroll(function () {
            p = $(this).scrollTop();
            if (p > temp) {
                if (p <= 700) {
                    $(".inner_banner img").css("transform", `scale(${i})`)
                    i = i + 0.5
                }
            } else {
                if (p <= 700) {
                    console.log("向上滑动")
                    $(".inner_banner img").css("transform", `scale(${i})`)
                    i = i - 0.5
                }
            }
            temp = $(this).scrollTop();
        })
    })
</script>

<!-- i02 -->
<div class="i02" style="padding: 100px 0;">
    <div class="icenter">
        <div class="i_top aos-init aos-animate" aos="fade-up">
            <div class="i_h3">产品中心</div>
            <a href="/wire.html" class="more">READ MORE</a>
        </div>
    </div>
    <div class="bot aos-init aos-animate" aos="fade-up" style="height: 560px;">
        <div class="nav">
            <div class="a" href="javascript:;">
                <div class="t">
                    <div class="le">
                        <img src="/static/images/sy_fm_tb1.png" alt="">
                        <span>热喷涂粉芯丝材</span>
                    </div>
                    <div class="ri">+</div>
                </div>
                <div class="b">
                    <a href="/wire.html" style="opacity: 0;">耐腐蚀热喷涂材料</a>
                    <a href="/wire.html" style="opacity: 0;">耐磨热喷涂材料</a>
                    <a href="/wire.html" style="opacity: 0;">打底热喷涂材料</a>
                </div>
            </div>
            <a class="a" href="/surface.html">
                <div class="le">
                    <img src="/static/images/sy_fm_tb2.png" alt="">
                    <span>堆焊粉芯丝材</span>
                </div>
                <div class="ri">+</div>
            </a>
            <a class="a active" href="/wear_plate.html">
                <div class="le">
                    <img src="/static/images/sy_fm_tb3.png" alt="">
                    <span>WRP双合金耐磨板</span>
                </div>
                <div class="ri">+</div>
            </a>
        </div>
        <div class="swiper i02Swiper swiper-container-fade swiper-container-horizontal">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                        <!-- i02_h5手机-->
                        <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <div class="swiper-slide">
                    <div class="imgbox"><video src="/video/sy_fmbj.mp4" muted="" autoplay="" loop=""></video>
                    </div>
                    <!-- i02_h5手机-->
                    <div class="i02_h5"><img src="/video/i02_h5.jpg" alt=""></div>
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
    </div>
</div>
<script>
    var i02Swiper = new Swiper('.i02Swiper', {
        speed: 1000,
        effect: 'fade',
        // autoplay: {
        // delay: 2000,
        // stopOnLastSlide: false,
        // disableOnInteraction: false,
        // },
        on: {
            slideChange: function () {
                switch (this.activeIndex) {
                    case 0:
                        $(".i02 .bot .nav .a").eq(0).addClass("active").siblings().removeClass("active")
                        break;
                    case 1:
                        $(".i02 .bot .nav .a").eq(1).addClass("active").siblings().removeClass("active")
                        break;
                    case 2:
                        $(".i02 .bot .nav .a").eq(2).addClass("active").siblings().removeClass("active")
                        break;
                    case 3:
                        $(".i02 .bot .nav .a").eq(3).addClass("active").siblings().removeClass("active")
                        break;
                    case 4:
                        $(".i02 .bot .nav .a").eq(4).addClass("active").siblings().removeClass("active")
                        break;
                    case 5:
                        $(".i02 .bot .nav .a").eq(5).addClass("active").siblings().removeClass("active")
                        break;
                    case 6:
                        $(".i02 .bot .nav .a").eq(6).addClass("active").siblings().removeClass("active")
                        break;
                    case 7:
                        $(".i02 .bot .nav .a").eq(7).addClass("active").siblings().removeClass("active")
                        break;
                }
            },
        },
    })
    $(".i02 .bot .nav .a").mouseenter(function () {
        let dex = $(this).index()
        console.log(dex)
        $(this).addClass("active").siblings().removeClass("active")
        switch (dex) {
            case 0:
                i02Swiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 1:
                i02Swiper.slideTo(1, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 2:
                i02Swiper.slideTo(2, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 3:
                i02Swiper.slideTo(3, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 4:
                i02Swiper.slideTo(4, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 5:
                i02Swiper.slideTo(5, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 6:
                i02Swiper.slideTo(6, 1000, false);//切换到第一个slide，速度为1秒
                break;
            case 7:
                i02Swiper.slideTo(7, 1000, false);//切换到第一个slide，速度为1秒
                break;
        }
        if (dex == 0) {

        } else {
            $(".i02 .bot .nav .a").eq(0).find(".b").slideUp()
            $(".i02 .bot .nav .a").eq(0).find(".b a").css("opacity", "0")
            $(".i02 .bot .nav .a").eq(0).removeClass("on")
        }
    })
    $(".i02 .bot .nav .a").click(function () {
        $(this).find(".b").slideToggle()
        $(".i02 .bot .nav .a").eq(0).find(".b a").css("opacity", "1")
        $(this).addClass("on")
    })
</script>

<div class="clear-fix" style="height: 40px;margin: 10px auto;"></div>

<!-- i05 -->
<div class="i05">
    <div class="left aos-init" aos="fade-right">
        <div class="swiper i05Swiper_L swiper-container-fade swiper-container-horizontal swiper-container-thumbs">
            <div class="swiper-wrapper" style="transition-duration: 0ms;">
                <div class="swiper-slide swiper-slide-active swiper-slide-thumb-active"
                    style="width: 1231px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                    <div class="box">
                        <div class="imgbox"><img src="/static/picture/hyyy-1.jpg"></div>
                        <div class="text">
                            <div class="icon"><img src="/static/images/sy_jjfatb1.png">
                            </div>
                            <div class="i_h3">电弧喷涂粉芯丝材应用</div>
                            <p>电弧喷涂粉芯丝材主要用于工程部件的表面喷涂和修复。通过喷涂新材料新技术在相关产业中的应用，解决其磨损和腐蚀问题，大幅度提高其使用寿命，减少因磨损和腐蚀造成的经济损失，具有强大生命力的新兴产业。
                            </p>
                            <a href="/industry/1" class="more more2" data-text="READ MORE"><span>READ
                                    MORE</span></a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-next"
                    style="width: 1231px; opacity: 0; transform: translate3d(-1231px, 0px, 0px); transition-duration: 0ms;">
                    <div class="box">
                        <div class="imgbox"><img src="/static/picture/hyyy-2.jpg"></div>
                        <div class="text">
                            <div class="icon"><img src="/static/images/sy_jjfatb2.png">
                            </div>
                            <div class="i_h3">堆焊技术应用服务</div>
                            <p>赛亿科技有限公司研发的HC系列、100Mo系列、CN系列、CNS系列磨辊堆焊自保护堆焊粉芯丝材，包括渣系、合金系的设计、耐磨性、焊接工艺性都是磨煤机磨辊堆焊制造及堆焊修复的最佳选择。
                            </p>
                            <a href="/industry/2" class="more more2" data-text="READ MORE"><span>READ
                                    MORE</span></a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide"
                    style="width: 1231px; opacity: 0; transform: translate3d(-2462px, 0px, 0px); transition-duration: 0ms;">
                    <div class="box">
                        <div class="imgbox"><img src="/static/picture/hyyy-3.jpg"></div>
                        <div class="text">
                            <div class="icon"><img src="/static/images/sy_jjfatb4.png">
                            </div>
                            <div class="i_h3">WRP耐磨板及应用</div>
                            <p>采用国际耐磨复合钢板通用的合金体系，具有优异的抗磨粒磨 损性能，采用冶金熔合的方法，耐磨层与基材实现冶金结合。耐磨层厚度2+2~12+12mm,
                                耐磨性大大高于热处理耐磨钢、铸造耐磨铸铁，抗磨数损能力也大大高于喷焊或热喷涂方法。
                            </p>
                            <a href="/industry/3" class="more more2" data-text="READ MORE"><span>READ
                                    MORE</span></a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide"
                    style="width: 1231px; opacity: 0; transform: translate3d(-3,693px, 0px, 0px); transition-duration: 0ms;">
                    <div class="box">
                        <div class="imgbox"><img src="/static/picture/hyyy-4.jpg"></div>
                        <div class="text">
                            <div class="icon"><img src="/static/images/sy_jjfatb4.png">
                            </div>
                            <div class="i_h3">锅炉管壁表面熔覆</div>
                            <p>CMT（即冷金属过渡熔敷技术）增材制造是一种新型的丝材电弧增材技术，具有一次成形复杂零件的特点，能够实现零件的自由制造。
                            </p>
                            <a href="/industry/4" class="more more2" data-text="READ MORE"><span>READ MORE</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </div>

    <div class="right aos-init" aos="fade-left">
        <div class="cc">
            <div class="i_h3">行业应用</div>
            <h4>Application</h4>
        </div>
        <p> 面向电力行业、水泥行业及机械行业等应用领域，赛亿科技对工业设备及工件进行预防护和再制造技术服务解决方案。 </p>
        <div class="box">
            <div class="swiper i05Swiper_S swiper-container-fade swiper-container-horizontal">
                <div class="swiper-wrapper" style="transition-duration: 0ms;">
                    <div class="swiper-slide swiper-slide-active"
                        style="width: 278px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                        <div class="imgbox"><img src="/static/picture/hyyy-1.jpg"></div>
                    </div>
                    <div class="swiper-slide swiper-slide-next"
                        style="width: 278px; opacity: 0; transform: translate3d(-278px, 0px, 0px); transition-duration: 0ms;">
                        <div class="imgbox"><img src="/static/picture/hyyy-2.jpg"></div>
                    </div>
                    <div class="swiper-slide"
                        style="width: 278px; opacity: 0; transform: translate3d(-556px, 0px, 0px); transition-duration: 0ms;">
                        <div class="imgbox"><img src="/static/picture/hyyy-3.jpg"></div>
                    </div>
                    <div class="swiper-slide"
                        style="width: 278px; opacity: 0; transform: translate3d(-834px, 0px, 0px); transition-duration: 0ms;">
                        <div class="imgbox"><img src="/static/picture/hyyy-4.jpg"></div>
                    </div>
                </div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev i05Swiper_S_ri-prev swiper-button-disabled" tabindex="0" role="button"
                    aria-label="Previous slide" aria-disabled="true">
                    <img src="/static/images/sy_jt1.png" alt="">
                </div>
                <div class="swiper-button-next i05Swiper_S_ri-next" tabindex="0" role="button" aria-label="Next slide"
                    aria-disabled="false">
                    <img src="/static/images/sy_jt2.png" alt="">
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
        <div class="num">
            <span class="sp_1">1</span>
            <div class="line"></div>
            <span class="sp_2">4</span>
        </div>
    </div>
</div>

<script language="javascript">
    $(".i05 .right .num .sp_2").html(`${$(".i05Swiper_S .swiper-slide").length}`)
    var i05Swiper_L = new Swiper('.i05Swiper_L', {
        effect: 'fade',
    })
    var i05Swiper_S = new Swiper('.i05Swiper_S', {
        thumbs: {
            swiper: i05Swiper_L,
        },
        effect: 'fade',
        navigation: {
            nextEl: '.i05Swiper_S_ri-next',
            prevEl: '.i05Swiper_S_ri-prev',
        },
        on: {
            slideChange: function () {
                $(".i05 .right .num .sp_1").html(`${this.activeIndex + 1}`)
            },
        },
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
    })
    i05Swiper_L.allowTouchMove = false;
    i05Swiper_S.allowTouchMove = false;
</script>

<!-- i01 -->
<div class="i01">
    <div class="icenter">
        <div class="i_top aos-init aos-animate" aos="fade-up">
            <div class="i_h3"> 新闻中心</div>
            <a href="/news.html" class="more">READ MORE</a>
        </div>
        <div class="bot aos-init aos-animate" aos="fade-up">
            {php}
            $data_news = \app\model\Article::where('status', 1)->where('cid', 'IN', '14,15')->field('id, cid, title,
            titlepic, summary,create_time')->order('sort desc, id desc')->limit(5)->select();
            $news_first=$data_news->shift();
            {/php}
            <a href="/news/{$news_first.create_time|date='Y-m-d'}/{$news_first.id}" class="left" target="_blank">
                <div class="imgbox"> <img src="{$news_first.titlepic}"></div>
                <!-- <div class="date">
                    <h4>{$news_first.create_time|date="D"}</h4>
                    <h5>{$news_first.create_time|date="Y/m"}</h5>
                </div> -->
                <div class="b_text">{$news_first.title}</div>
            </a>
            <dl>
                {foreach $data_news as $val}
                <dd>
                    <a href="/news/{$val.create_time|date='Y-m-d'}/{$val.id}" target="_blank">
                        <!-- <div class="imgbox"  style="width: 30%;"> <img src="{$val.titlepic}"></div> -->
                        <!-- <div class="le">
                            <h4>{$val.create_time|date="D"}</h4>
                            <h5>{$val.create_time|date="Y/m"}</h5>
                        </div> -->
                        <div class="ri" style="width: 60%;">
                            <h4>{$val.title}</h4>
                            <h5>READ MORE <span>&gt;</span> </h5>
                        </div>
                    </a>
                </dd>
                {/foreach}
            </dl>
        </div>
    </div>
</div>